<template>
  <div class="app-content interface">
    <div class="w-1200 notice-bar hidden-xs-only">
      <notice />
    </div>
    <div class="w-1200">
      <div class="api-content">
        <div class="list-title-bar">
          <h2 class="title">Api列表</h2>
        </div>
        <div class="list-type-bar hidden-xs-only">
          <div class="type-list">
            <div
              v-for="(item, idx) in typeList"
              :key="idx"
              :class="['type-item', currentType === idx ? 'active' : '']"
              @click="changeType(idx)"
            >{{ item }}</div>
          </div>
          <div class="list-type-search">
            <div class="search-input">
              <input type="text" placeholder="请输入Api名称">
            </div>
            <div class="search-button">
              <el-button type="primary">搜索</el-button>
            </div>
          </div>
        </div>
        <div class="api-list">
          <div class="api-list-item" v-for="i in 9">
            <api-card
              @handle-click="handleCardClick"
              @handle-sub-click="handleCardSubApiClick"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Notice from '@/views/components/Notice'
import ApiCard from '@/views/components/ApiCard'
export default {
  name: 'Interface',
  components: {
    Notice,
    ApiCard
  },
  mixins: [],
  props: {},
  data() {
    return {
      typeList: ['全部', '汽车管理', '金融科技', '企业工商', '汽车管理', '金融科技', '企业工商', '金融科技'],
      currentType: 0
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    changeType(idx) {
      this.currentType = idx
    },
    handleCardClick(data) {
      console.log(data, 'handleCardClick')
    },
    handleCardSubApiClick(data) {
      console.log(data, 'handleCardSubApiClick')
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../element-variables.scss";
.api-content {
  background-color: #fff;
  margin-bottom: 30px;
}
.api-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 10px;
  .api-list-item {
    //background-color: #ccc;
    width: 25%;
    padding: 10px;
  }
  @media (max-width: 767px) {
    padding: 10px;
    .api-list-item {
      width: 100%;
      padding: 0 0 10px;
    }
  }
}
</style>
